<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机多边形</title>
  <script src="../common/lib/gl-renderer.js"></script>
</head>
<body>
  <canvas width="600" height="600"></canvas>
  <script>
    const canvas = document.querySelector('canvas');
    const renderer = new GlRenderer(canvas);

    const vertex = `
      attribute vec2 a_vertexPosition;
      
      void main() {
        gl_Position = vec4(a_vertexPosition, 1, 1);
      }
    `;

    const fragment = `
      #ifdef GL_ES
      precision highp float;
      #endif

      uniform vec4 u_color;
      
      void main() {
        gl_FragColor = u_color;
      }
    `;
    const program = renderer.compileSync(fragment, vertex);
    renderer.useProgram(program);

    function randomShape(x = 0, y = 0, edges = 3, rotation = 0.0, radius = 0.1) {
      const a0 = rotation;
      const delta = 2 * Math.PI / edges;
      const positions = [];
      const cells = [];
      for(let i = 0; i < edges; i++) {
        const angle = a0 + i * delta;
        positions.push([x + radius * Math.sin(angle), y + radius * Math.cos(angle)]);
        if(i > 0 && i < edges - 1) {
          cells.push([0, i, i + 1]);
        }
      }
      return {positions, cells};
    }

    const COUNT = 3000;
    function render() {
      for(let i = 0; i < COUNT; i++) {
        const x = 2 * Math.random() - 1;
        const y = 2 * Math.random() - 1;
        const rotation = 2 * Math.PI * Math.random();

        renderer.uniforms.u_color = [
          Math.random(),
          Math.random(),
          Math.random(),
          1];

        const {positions, cells} = randomShape(x, y, 3 + Math.floor(4 * Math.random()), rotation);
        renderer.setMeshData([{
          positions,
          cells,
        }]);

        renderer._draw();
      }
      requestAnimationFrame(render);
    }

    render();
  </script>
</body>
</html>